<template>
  <div class="app-container">
    <!-- 根据商品名称进行模糊查询 -->
    <el-input
      v-model="search"
      placeholder="请输入内容"
      class="search"
      @keyup.enter.native="searchName"
    />

    <!-- 下拉列表框，根据品类进行搜索 -->
    <el-select v-model="value" clearable placeholder="请选择">
      <el-option
        v-for="item in cates"
        :key="item._id"
        :value="item.cate_zh"
      />
    </el-select>

    <!-- 根据时间对商品进行筛选 -->
    <div class="time">
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
    </div>

    <!-- 新增商品 -->
    <el-button
      type="primary"
      class="addGoods"
      @click="addGoods"
    >
      添加商品
    </el-button>

    <!-- 商品列表数据 -->
    <el-table
      ref="multipleTable"
      :data="goodsList"
      tooltip-effect="dark"
      style="width: 100%"
      algin="center"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        algin="center"
      />

      <el-table-column
        label="商品名称"
        algin="center"
      >
        <template slot-scope="scope">
          {{ scope.row.goods_name }}
        </template>
      </el-table-column>

      <el-table-column
        prop="name"
        label="商品图片"
        algin="center"
      >
        <template slot-scope="scope">
          <img :src="$url.imgServe + '/images' +  scope.row.img" class="tableImg" alt="">
        </template>
      </el-table-column>

      <el-table-column
        prop="address"
        label="商品类型"
        algin="center"
      >
        <template slot-scope="scope">
          {{ scope.row.cate }}
        </template>
      </el-table-column>

      <el-table-column
        prop="address"
        label="商品描述"
        algin="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ scope.row.desc }}
        </template>
      </el-table-column>

      <el-table-column
        prop="address"
        label="商品价格"
        algin="center"
      >
        <template slot-scope="scope">
          {{ '￥' + scope.row.price }}
        </template>
      </el-table-column>

      <el-table-column
        prop="address"
        label="是否热销"
        algin="center"
      >
        <template slot-scope="scope">
          {{ scope.row.hot ? '是' : '否' }}
        </template>
      </el-table-column>

      <!-- 对商品进行操作 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="editGoods(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="removeGoods(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页列表 -->
    <div class="block paging">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="1"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="SizeChange"
        @current-change="CurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Goods',

  data() {
    return {
      search: '',
      // 存储商品列表的相关信息
      goodsList: [],
      total: 0,
      multipleSelection: [],
      cates: [],
      value: '',
      value1: '',
      currentPage: 1,
      page: 1,
      size: 5
    }
  },

  mounted() {
    this.init()
  },

  methods: {
    // 初始化数据
    init() {
      const params = {
        name: this.search,
        page: this.page,
        size: this.size
      }
      this.$api.getGoodsList(params).then(res => {
        this.goodsList = res.data.list
        this.total = res.data.total
      })

      this.$api.getCatesList({}).then(res => {
        this.cates = res.data
      })
    },

    // 实现页面的模糊查询
    searchName() {
      this.init()
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    // 用户编辑当前的商品信息
    editGoods(row) {
      this.$router.push(`/goods/edit/${row._id}`)
    },

    // 删除单件商品
    removeGoods(row) {
      const params = {
        _id: row._id
      }
      this.$dialog.comfirm().then(() => {
        this.$api.removeGoods(params).then(() => {
          this.$dialog.success()
          this.init()
        })
      })
    },

    // 新增商品跳转
    addGoods() {
      this.$router.push('/goods/add')
    },

    // 表示当前的一页能显示几条数据
    SizeChange (val) {
      this.size = val
      this.init()
    },

    // 切换当前的页码能够加载出相应的数据
    CurrentChange (val) {
      this.page = val
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-container {
    .search {
      width: 200px;
      margin-right: 45px;
    }

    .time {
      display: inline-block;
      margin-left: 45px;
    }

    .addGoods {
      margin-left: 45px;
      border-radius: 8px;
    }

    .paging {
      margin-top: 10px;
    }

    .tableImg {
      width: 45px;
      height: 45px;
    }

  }

</style>
